import React, { Suspense } from "react";
import Home from "../App.js";
<% if (mainRoute === 'hash') { -%>
import { createHashRouter } from "react-router-dom";
<% } -%>

<% if (mainRoute === 'history') { -%>
import { createBrowserRouter } from "react-router-dom";
<% } -%>


const AsyncComponent = ({ load }) => {
  const Component = React.lazy(load);
  return (
    <Suspense>
      <Component />
    </Suspense>
  );
};

const routes = [
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "about",
    element: <AsyncComponent load={() => import("../About.js")} />,
  },
  {
    path: "*",
    element: <Home />,
  },
];
const opts = {
  basename: "/",
};

<% if (mainRoute === 'hash') { -%>
const router = createHashRouter(routes, opts);
<% } -%>

<% if (mainRoute === 'history') { -%>
const router = createBrowserRouter(routes, opts);
<% } -%>

export default router;
